<template>
  <div class="desktop-main">
    <div class="search-container">
      <div class="search-box">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="搜索应用..." v-model="searchQuery" />
      </div>
    </div>
    <draggable
      v-model="myApps"
      class="app-grid"
      item-key="appName"
      @end="onDragEnd"
      :animation="200"
      ghost-class="ghost-card"
      drag-class="drag-card"
    >
      <template #item="{ element: app, index }">
        <div class="app-card" @click="openApp(app)">
          <div class="app-content">
            <div class="app-icon">
              <img :src="app.appIconImg" :alt="app.appName" />
            </div>
            <div class="app-name">{{ app.appName }}</div>
          </div>
          <div class="corner-trigger"></div>
          <div class="overlay">
            <div class="delete-btn" @click.stop="confirmDelete(app, index)">
              <i class="close-button">×</i>
            </div>
            <h3 class="overlay-title">{{ app.appName }}</h3>
            <p class="overlay-description">{{ app.appDescr }}</p>
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script>
import emitter from '@/utils/eventBus'
import draggable from 'vuedraggable'

export default {
  name: 'index',
  components: {
    draggable
  },
  data() {
    return {
      searchQuery: '',
      myApps: []
    }
  },
  computed: {
    filteredApps() {
      return this.myApps.filter((app) =>
        app.appName.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  },
  mounted() {
    this.loadMyApps()
  },
  methods: {
    loadMyApps() {
      try {
        const myApps = localStorage.getItem('myApps')
        this.myApps = myApps ? JSON.parse(myApps) : []
      } catch (error) {
        console.error('加载应用失败:', error)
      }
    },
    confirmDelete(app, index) {
      this.deleteApp(index)
    },
    deleteApp(index) {
      this.myApps.splice(index, 1)
      localStorage.setItem('myApps', JSON.stringify(this.myApps))
      this.$message({
        type: 'success',
        message: '应用已卸载'
      })
    },
    openApp(app) {
      if (app.appType == 'outerUrl') {
        window.open(app.appData.url)
      } else {
        emitter.emit('update-opened-apps', app)
        this.$router.push({
          path: '/dynamicApp',
          query: {
            appType: app.appType,
            appData: btoa(encodeURIComponent(JSON.stringify(app.appData)))
          }
        })
      }
    },
    onDragEnd() {
      localStorage.setItem('myApps', JSON.stringify(this.myApps))
    }
  }
}
</script>

<style scoped>
.desktop-main {
  padding: 20px;
  height: 100%;
  background-color: #f5f7fa;
  user-select: none;
  -webkit-app-region: no-drag;
}

.search-container {
  margin-bottom: 30px;
}

.search-box {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  margin-left: 10px;
  font-size: 16px;
  color: #333;
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  padding: 12px;
}

.app-card {
  background: white;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  cursor: pointer;
  height: 130px;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.ghost-card {
  opacity: 0.5;
  background: #f0f9ff;
  border: 2px dashed #409eff;
}

.drag-card {
  transform: scale(1.05);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.app-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background-color: #a3a3a399;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.3s;
}

.delete-btn:hover {
  background-color: #ad9191;
  text-align: center;
}

.app-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 12px;
}

.app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.app-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.corner-trigger {
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 25px;
  background: linear-gradient(45deg, transparent 50%, rgba(119, 170, 241, 0.95) 50%);
  z-index: 1;
  transition: all 0.3s ease;
  transform-origin: top right;
  cursor: pointer;
  opacity: 0;
}

.app-card:hover .corner-trigger {
  opacity: 1;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(119, 170, 241, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.3);
  transform-origin: top right;
  transition: all 0.3s ease;
}

.corner-trigger:hover {
  opacity: 0;
}

.corner-trigger:hover + .overlay,
.overlay:hover {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.overlay-title {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 10px;
}

.overlay-description {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  text-align: center;
}
</style>
